<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
</head>
<body>


<div id="app">


    <div>
         num1:<input v-model="num1">
    </div>
    <div>
        num2:<input v-model="num2">
    </div>
    <div>
        num3:<input v-model="num3">

    </div>
    {{num1+num2}}
    sum:{{sum()}}
    <hr>
     <div>
          当前方法被调用了{{counter1}}次
     </div>

    total:{{total}}
    <div>
        计算属性total被调用了{{counter2}}次
    </div>
</div>

</body>
<script src="../../../lib/vue.global.js"></script>
<script>

    const app = {
        data() {
            return {
                num1: 2,
                num2: 4,
                num3:9,
                counter1:0,
                counter2:0
            }
        },
        computed:{
              total:function () {
                  this.counter2++;
                  return  this.num1+ this.num2;
              }

        }
        ,methods:{
            sum(){
                 this.counter1++;
                 return this.num1+this.num2;
            }
        }
    }

    Vue.createApp(app).mount('#app')

</script>

</html>